<template>
  <div class="clientPanoramica">
    <el-card class="tongjiTime">
      统计时间:

      <el-select v-model="tongjiTime.time1" filterable placeholder="请选择" style="margin:0 15px">
        <!-- v-for="item in options"
        :key="item.value"-->
        <el-option :label="'自然日'" :value="'1231'"></el-option>
        <el-option :label="'自然日2'" :value="'1231'"></el-option>
      </el-select>

      <el-date-picker v-model="tongjiTime.time2" type="date" placeholder="选择日期"></el-date-picker>
    </el-card>

    <el-card class="liulanOverview">

      <h2 class="title">浏览总览</h2>
      <div class="tabOverview flex_between">
        <span class="arrowOverview el-icon-arrow-left"></span>
        <ul style="width:95%;height:100px;" class="flex">
          <li class="liOverview active">
            <span style="marginRight:15px;fontWeight: 700;">全部</span><i class="el-icon-info"></i>
            <div class="liOverview-keshu flex_between">访客数<span class="liOverview-num">0</span></div>
          </li>
          <li class="liOverview">
            <span style="marginRight:15px;fontWeight: 700;">全部</span><i class="el-icon-info"></i>
            <div class="liOverview-keshu flex_between">访客数<span class="liOverview-num">0</span></div>
          </li>
          <li class="liOverview">
            <span style="marginRight:15px;fontWeight: 700;">全部</span><i class="el-icon-info"></i>
            <div class="liOverview-keshu flex_between">访客数<span class="liOverview-num">0</span></div>
          </li>
          <li class="liOverview">
            <span style="marginRight:15px;fontWeight: 700;">全部</span><i class="el-icon-info"></i>
            <div class="liOverview-keshu flex_between">访客数<span class="liOverview-num">0</span></div>
          </li>
          <li class="liOverview">
            <span style="marginRight:15px;fontWeight: 700;">全部</span><i class="el-icon-info"></i>
            <div class="liOverview-keshu flex_between">访客数<span class="liOverview-num">0</span></div>
          </li>

        </ul>
        <span class="arrowOverview el-icon-arrow-right"></span>
      </div>

      <div class="scanOverview flex" >
        <div class="name-Overview flex_around" >
          <div>
            <i class="el-icon-s-goods"></i><div>浏览访问</div></div>
          </div>
        <div class="content-Overview">
          <ul class="ul-content-Overview flex">
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访客数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访客数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访客数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访客数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
          </ul>
          <ul class="ul-content-Overview flex">
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访客数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访客数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
          </ul>
        </div>
      </div>

      <div class="scanOverview clinchOverview flex" >
        <div class="name-Overview flex_around" >
          <div>
            <i class="el-icon-s-goods"></i><div>成交转化</div></div>
          </div>
        <div class="content-Overview">
          <ul class="ul-content-Overview flex">
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">支付人数</span><i class="el-icon-info"></i>
              <div class="overview-number">0</div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
            <li class="liContentOverview">
              <span style="marginRight:15px;fontWeight: 700;">访问-支付转化率</span><i class="el-icon-info"></i>
              <div class="overview-number"> - </div>
              <div class="liOverview-keshu">较前一日<span class="liOverview-num"> - </span></div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ClientA-Panoramica',
  data () {
    return {
      tongjiTime: {
        time1: null,
        time2: null
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  font-weight: 700;
  font-size: 16px;
}
.tabOverview{
  margin: 20px 0;
  .arrowOverview{
    opacity: 0;
    cursor: pointer;
  }
  .liOverview{
    // flex:1;
    width: 20%;
    margin: 0 10px;
    padding: 15px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
    .liOverview-keshu{
      margin-top: 15px;
    }
  }
  li.active{
    background-color: #edf4ff;
    border-color: #6f9ae5;
  }
}

.scanOverview{
  margin-bottom: 15px;
}

.name-Overview{
  width: 100px;
  text-align: center;
  background-color: #5c89fd;
  color: #fff;
  // height: 200px;
  flex-wrap: wrap;
}
.content-Overview{
  width: 100%;
  background-color: #f3f7fd;
}
.ul-content-Overview{
  width:100%;
  .liContentOverview{
    width: 23%;
    margin:0 10px;
    padding: 15px;
    // border: 1px solid #ccc;
    // border-radius: 5px;
    .overview-number{
      margin: 10px 0;
      font-weight: 700;
    }
    .liOverview-keshu{
      color: #bfc0c3;
    }
  }
}

.clinchOverview{
  .name-Overview{
    background-color: #58ca79;
  }
  .content-Overview{
    background-color: #f0f8f0;
  }
}
</style>
